<template>
	<!-- 未登录状态 -->
	<view class="body">
		<view class="unlogin" v-if="!login">
			<image src="../../static/pic/my.png" mode=""></image>
			<button open-type="getUserInfo" @click="toLogin">一键登录</button>
		</view>

		<!-- 登陆状态 -->
		<view class="login" v-else>
			<view class="info">
				<image class="avatarUrl" :src="avatarUrl" mode=""></image>
				<text class="nickName">{{nickName}}</text>
			</view>
			<view class="call-list">
				<!-- 发布 -->
				<view class="call" @click="topush">
					<view class="call-left">
						<uni-icons type="paperplane" size="20"></uni-icons>
						<text>我的发布</text>
					</view>
					<view class="call-right">
						<uni-icons type="forward" size="20"></uni-icons>
					</view>
				</view>

				<!-- 收藏 -->
				<view class="call" @click="tocollect">
					<view class="call-left">
						<uni-icons type="star-filled" size="20"></uni-icons>
						<text>我的收藏</text>
					</view>
					<view class="call-right">
						<uni-icons type="forward" size="20"></uni-icons>
					</view>
				</view>
				<!-- 信息 -->
				<view class="call" @click="toinfo">
					<view class="call-left">
						<uni-icons type="info" size="20"></uni-icons>
						<text>我的信息</text>
					</view>
					<view class="call-right">
						<uni-icons type="forward" size="20"></uni-icons>
					</view>
				</view>
				<!-- 意见反馈 -->
				<view class="call" @click="toadvic">
					<view class="call-left">
						<uni-icons type="help" size="20"></uni-icons>
						<text>意见反馈</text>
					</view>
					<view class="call-right">
						<uni-icons type="forward" size="20"></uni-icons>
					</view>
				</view>
				<!-- 退出 -->
				<view class="call" @click="logout">
					<view class="call-left">
						<uni-icons type="redo" size="20"></uni-icons>
						<text>退出登陆</text>
					</view>
					<view class="issue-right">
						<uni-icons type="forward" size="20"></uni-icons>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		http
	} from '../../API/request.js';
	const user = ref({})
	const avatarUrl = ref('')
	const nickName = ref('')
	const code = ref('')
	const login = ref(false)
	// 点击事件


	const toLogin = () => {
		const openid = uni.getStorageSync('openid')
		uni.login({
			provider: 'weixin',
			success: function(loginRes) {
				http.post('/searchLogin', {
					openid: openid
				}).then((res) => {
					const {
						data
					} = res
					// 第一次登陆
					if (data === 'first') {
						// 获取用户信息,目前默认返回黑白头像和默认用户名
						uni.getUserInfo({
							provider: 'weixin',
							onlyAuthorize: true,
							success: function(infoRes) {
								const avatarurl = infoRes.userInfo.avatarUrl;
								const nickname = infoRes.userInfo.nickName;
								const userinfo = {
									avatarurl,
									nickname
								}
								// 缓存
								uni.setStorageSync('userinfo', userinfo)
								uni.setStorageSync('login', true)
								login.value = true
								http.post('/firstLogin', {
									openid: openid,
									avatarurl: avatarurl,
									nickname: nickname
								}).then((res) => {
									// 更新页面数据
									avatarUrl.value = avatarurl
									nickName.value = nickname
								})
							}
						})
					} else {
						http.post('/existLogin', {
							openid: openid
						}).then((res) => {
							const {
								data
							} = res
							const avatarurl = data.avatarurl
							const nickname = data.nickname
							const contact = data.contact
							const userinfo = {
								avatarurl,
								nickname,
								contact
							}
							// 缓存
							uni.setStorageSync('userinfo', userinfo)
							uni.setStorageSync('login', true)
							login.value = true
							avatarUrl.value = data.avatarurl
							nickName.value = data.nickname
						})
					}
				})

			}
		})
	}
	// 退出登陆
	const logout = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗？',
			success: function(res) {
				if (res.confirm) {
					// 用户点击了确定按钮
					// 清除本地存储中的登录状态和用户信息
					uni.removeStorageSync('login');
					uni.removeStorageSync('userinfo');
					uni.removeStorageSync('account')
					// 更新组件中的数据，以反映未登录状态
					login.value = false;
					avatarUrl.value = '';
					nickName.value = '';

				} else if (res.cancel) {
					// 用户点击了取消按钮
					// 不做任何操作
				}
			}
		});
	};
	const topush = () => {
		uni.navigateTo({
			url: '/subpkg/mypush/mypush'
		})
	}
	const tocollect = () => {
		uni.navigateTo({
			url: '/subpkg/mycollect/mycollect'
		})
	}
	const toinfo = () => {
		uni.navigateTo({
			url: '/subpkg/myinfo/myinfo'
		})
	}
	//意见反馈
	const toadvic = () => {
		uni.navigateTo({
			url: '/subpkg/advic/advic'
		})
	}

	onLoad(() => {
		const logine = uni.getStorageSync('login')
		const userdata = uni.getStorageSync('userinfo')
		if (userdata) {
			avatarUrl.value = userdata.avatarurl
			nickName.value = userdata.nickname
		}
		login.value = !!logine
	})
	onShow(() => {
		const openid = uni.getStorageSync('openid')
		const userdata = uni.getStorageSync('userinfo')
		if (avatarUrl.value !== userdata.avatarurl || nickName.value !== userdata.nickname) {
			http.post('/update', {
				openid: openid
			}).then((res) => {
				const {
					data
				} = res
				avatarUrl.value = data.avatarurl
				nickName.value = data.nickname
			})
		}
	})
</script>


<style lang="less">
	.body {
		// background-color: #fff;
		height: 100vh;
		width: 100vw;

		.unlogin {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-top: 45%;

			image {
				width: 150rpx;
				height: 150rpx;
			}

			button {
				margin-top: 50rpx;
				width: 80%;
				background-color: skyblue;
				color: #fff;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 50rpx;
			}
		}


		.login {
			.info {
				background-color: skyblue;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 60rpx 0;
			}

			.avatarUrl {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;

			}

			.nickName {
				color: #fff;
				margin-top: 30rpx;
			}

			.call-list {
				display: flex;
				flex-direction: column;
				align-items: center;
				transform: translateY(-18rpx);

				.call {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 85%;
					background-color: #fff;
					padding: 30rpx 20rpx;
					border-radius: 25rpx;
					margin-bottom: 10rpx;



					.call-left {
						display: flex;
						align-items: center;

						text {
							margin-left: 20rpx;
						}
					}

					.call-right {
						width: 40rpx;
						height: 40rpx;
					}




				}
			}

		}
	}
</style>